<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仪表抄表</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="demoTable">
    搜索房间编号：
    <div class="layui-inline">
        <input class="layui-input" name="RoomNO" id="demoReload" placeholder="请输入房间编号" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="searchBtn">搜索</button>
    <button class="layui-btn" data-type="reload" id="addBtn">添加</button>
</div>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
<script type="text/javascript" th:src="@{/js/layui.all.js}"></script>
<script type="text/html" id="btnStatus">
    {{#
    if(d.meterReadStatus =="true"){
    }}
    <input type="checkbox" checked="" name="open" lay-skin="switch" lay-text="OFF|ON"  disabled>
    {{#
    }else {
    }}
    <input type="checkbox"  name="close" lay-skin="switch" lay-filter="switchTest" lay-text="OFF|ON" disabled>
    {{#
    }
    }}
</script>
<script type="text/html" id="buttonTpl">
    {{#
    if(d.auditStatus == 1){
    }}
    <button class="layui-btn layui-btn-xs">已审核</button>
    {{#
    }else {
    }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>
    {{#
    }
    }}
</script>
<script>
    layui.use([ 'laypage', 'layer', 'table'], function() {
        var laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table;//表格
        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , height: 550
            , url: 'listData' //数据接口
            , title: '用户表'
            , page: true //开启分页
            , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板
            , totalRow: true //开启合计行
            , limits: [5, 10, 15]
            , cols: [
                [ //表头, totalRowText: '合计：'
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'meterID', title: '', width: 80, sort: true, fixed: 'left'}
                    , {field: 'precinct', title: '楼宇', width: 120}
                    , {field: 'RoomNO', title: '房间编号', width: 120, sort: true}
                    , {field: 'meterNO', title: '仪表编号', width: 120, sort: true}
                    , {field: 'clientName', title: '客户姓名', width: 120}
                    , {field: 'patitemsName', title: '仪表', width: 120}
                    , {field: 'meterReadTime', title: '抄表期', width: 150, sort: true}
                    , {field: 'meterReadEndTime', title: '抄表结束期', width: 150, sort: true}
                    , {field: 'lastIndex', title: '上次指数', width: 120, sort: true}
                    , {field: 'atIndex', title: '本次指数', width: 120, sort: true}
                    // , {field: 'additional', title: '附加量', width: 120, sort: true}
                    , {field: 'utility', title: '实用量', width: 120, sort: true}
                    , {field: 'patitemstName', title: '收费标准', width: 120}
                    , {field: 'meterReadType', title: '抄表类型', width: 120}
                    , {field: 'meterReadStatus', title: '抄表状态',templet:'#btnStatus', width: 120}
                    , {field: 'auditStatus', title: '审核状态',templet:'#buttonTpl',align:'center', width: 120}
                    , {field: 'meterReadDate', title: '抄表日期', width: 150, sort: true}
                    , {field: 'meterReader', title: '抄表人', width: 120}
                    , {field: 'remark', title: '备注', width: 120}
                    , {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}
                ]
            ]
            , id: 'listData'
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据

                switch (obj.event) {
                    //表头添加
                    case 'add':
                        //添加
                  layer.open({
                              type: 2,      //layer的5种层类型   0（信息框，默认）、1（页面层）、2（iframe层）、3（加载层）、4（tips层）
                              title: ['新增', 'font-size:18px;'],  //弹出框标题
                              area: ['800px', '650px'],    //设置弹框的大小
                              shadeClose: true,          //点击遮罩层外区域关闭遮罩层
                              anim: 2,              //弹出动画
                              offset: 't',    //位置置顶
                              content: 'add'    //写方法的路径  进入页面  此处也和easyui相同
                          });
                        break;
                    //表头修改
                    case 'update':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else if (data.length > 1) {
                            layer.msg('只能同时编辑一个');
                        } else if(checkStatus.data[0].meterReadStatus=="true"){
                            //  layer.alert('编辑 [id]：'+ checkStatus.data[0].meterID);
                            //修改
                            layer.open({
                                type: 2, //layer的5种层类型   0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                                title: ['修改数据', 'font-size:18px;'],  //弹出框标题
                                shade: [0.5, '#393D49'],     //遮罩层
                                shadeClose: true,          //点击遮罩层外区域关闭遮罩层
                                area: ['800px', '650px'],    //弹出框大小
                                anim: 1,              //弹出动画
                                offset: 't',
                                content: 'selectMetersById?meterID=' + checkStatus.data[0].meterID
                            });

                        }else{
                            layer.alert('当前禁止操作，请前往审核页面启用抄表状态！');
                        }
                        break;
                    //表头删除
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else if(checkStatus.data[0].meterReadStatus=="true") {
                            //删除
                            layer.confirm('真的要删除吗？', function () {
                                $.post("delete", {'meterID': checkStatus.data[0].meterID}, function (result) {
                                        layer.msg(
                                            result.msg, {
                                                icon: 1,
                                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                            }, function () {
                                                //自定义刷新当前页面
                                                setTimeout('window.location.reload()', 1000);

                                            });
                                    }
                                );
                            });
                        }else{
                            layer.alert('当前禁止操作，请前往审核页面启用抄表状态！');
                        }
                        break;
                };

        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            //修改
            if(data.meterReadStatus=='true'){
            if(layEvent === 'edit'){
                layer.open({
                    type: 2, //layer的5种层类型   0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    title: ['修改数据', 'font-size:18px;'],  //弹出框标题
                    shade: [0.5, '#393D49'],     //遮罩层
                    shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                    area: ['800px', '650px'],    //弹出框大小
                    anim: 1,              //弹出动画
                    offset: 't',
                    content:'selectMetersById?meterID='+data.meterID
                });
            }

            //删除
            if(layEvent === 'del'){
                //操作
                layer.confirm('真的要删除吗？', function () {
                    $.post("delete",{'meterID':data.meterID},function(result)
                        {
                            layer.msg(
                                result.msg, {
                                    icon: 1,
                                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //自定义刷新当前页面
                                    setTimeout('window.location.reload()',1000);
                                });
                        }
                    );
                });
            }
            }else{
                layer.alert('当前禁止操作，请前往审核页面启用抄表状态！');
            }
        });

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                }
            }
        });

        //执行条件查询
        /*条件查询按钮*/
        var $ = layui.$;
        $('#searchBtn').on('click', function(){
            //获取输入框
            var demoReload = $('#demoReload');
            //执行重载
            table.reload('listData', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    RoomNO: demoReload.val()
                }
            });
        });
        //新增
        $("#addBtn").click(function () {
            layer.open({
                type:2,      //layer的5种层类型   0（信息框，默认）、1（页面层）、2（iframe层）、3（加载层）、4（tips层）
                title: ['新增', 'font-size:18px;'],  //弹出框标题
                area: ['800px','650px'],    //设置弹框的大小
                shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                anim: 2,              //弹出动画
                offset: 't', //位置置顶
                content:'add'     //写方法的路径  进入页面  此处也和easyui相同
            })
        })

    });
</script>
</html>